<#assign flickrKey = "2ac4f6d0c9e7702c40ccf7512693e603" />
<#assign flickrUrl = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key="+flickrKey />
<#assign tags=""/>
<#assign current = 0 />
<#assign sep = "" />
<#if document.properties['caas:tags']?has_content>
	<#list document.properties['caas:tags'] as tag>
		<#if current lt 5>
			<#assign tags = tags + sep + tag />
			<#assign sep = ","/>
		</#if>
		<#assign current = current + 1 />
	</#list>

	<script type="text/javascript" src="${TemplateUtils.context}/scripts/jquery-1.2.3.pack.js"></script>
	<script type="text/javascript" src="${TemplateUtils.context}/scripts/jquery.flickr.js"></script>
	<script type="text/javascript" src="${TemplateUtils.context}/scripts/jquery.lightbox-0.5.min.js"></script>
	<script type="text/javascript" src="${TemplateUtils.context}/scripts/jquery.litebox.js"></script>
	<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA_97Ip04_pcg4-y91fqk8iRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSGnboiyY1VzOyB-taGLpsEHgQ7sQ"></script>
	
	<style type="text/css">
	#flickr ul {
	list-style-type: none;
	}

	#flickr li {
	float: left;
	}
	
	.search-result {
		border: 1px solid #bbb;
		
	}
	
	.search-result p {
		color: #555;
	}
	.search-result h3 {
		text-decoration: underline;
		font-size: 110%;
	}
	</style>
	<div id="button-bar">
		<input type="button" value="Show images" onclick="showImages();" ></input>
		<input type="button" value="Show related docs" onclick="showSearch();" ></input>
	</div>
	
	<div id="related-content"  style="display: none;">
		<h2>Related documents for ${tags}:</h2>
		<div id="alfresco-search">
		
		<#list companyhome.childrenByLuceneSearch['@caas\\:tags:"${tags}"'] as node>
			<#if node.id != document.id>
				<div class="search-result">
				<h3><a href="${TemplateUtils.context}/n/showDocDetails/workspace/SpacesStore/${node.id}" target="_blank">${node.name}</a></h3>
				<p>${node.properties['cm:description']!}</p>
				</div>
			</#if>
		</#list>

		</div>
		<div id="google-search">
		
		</div>
	</div>
	<div id="images-div" style="display: none;">
		<h2>Images for tags: ${tags}</h2>
		<div id="flickr">
		</div>
	</div>
	
	<#if tags?has_content>
	<script type="text/javascript">
	function showImages() 
	{
		$('#images-div').show();
		$('#flickr').flickr({
			api_key: '2ac4f6d0c9e7702c40ccf7512693e603',
			per_page: 8,
			tags: '${tags}',
			type: 'search',
			litebox: true
		});
	}
	
	function showSearch()
	{
		
		var url = 'http://ajax.googleapis.com/ajax/services/search/web?jsoncallback=?&key=ABQIAAAA_97Ip04_pcg4-y91fqk8iRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSGnboiyY1VzOyB-taGLpsEHgQ7sQ&v=1.0&callback=searchComplete&context=bar&q=';
		
		url += "${tags}";
		
		
		$.getJSON(url, function(r) {
			
		});
		
		$('#related-content').show();
	}
	
	function alfComplete(context, result)
	{
		var target = $('#alfresco-search');
		target.html('<h2>Alternative Alfresco</h2>');
		var i = 0;
		result.each(function(res) {
			if (i++ < 5) {
				target.append ('<div class="search-result"><h3><a href="'+res.id+'" target="_blank">'+res.title+' - ('+res.name+')</a></h3><p>'+res.description+'</p></div>');
			}
		});
	}
	

	function searchComplete(context, results, status, details, unused)
	{
		var target = $('#google-search');
		target.html('<h2>Content on the Web</h2>');
		results.results.each(function(res) {
			target.append ('<div class="search-result"><h3><a href="'+res.url+'" target="_blank">'+res.title+'</a></h3><p>'+res.content+'</p></div>');
		});
		
	}
	
	// google.load("search", "1");
	// google.setOnLoadCallback(doSearch);
		
	function doSearch()
	{
		var searchControl = new google.search.SearchControl();
        searchControl.addSearcher(new google.search.WebSearch());
        // searchControl.draw(document.getElementById("google-search"));
		
	}
	
	</script>
	</#if>
<#else>
No tags found.
</#if>